<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .big {
            width: 600px;
            text-align: center;
            margin: auto;
        }

        .box {
            width: 600px;
            height: 400px;
            outline: 2px solid red;
            position: relative;
            /* overflow: hidden; */
        }

        video {
            width: 600px;
            height: 400px;
        }

        .box p {
            position: absolute;
            left: 600px;
            top: 100px;
            transform: translateX(0);
            transition: all 10s;
        }

        .test {
            transform: rotate(180deg);

        }
    </style>
</head>

<body>
    <div class="big">
        <div class="box">
            <!-- 1.视频 -->
            <!-- <video src="./iceage4.mp4" controls></video> -->
            <!-- 2.弹幕 -->
            <!-- <p>12345</p> -->

        </div>
        <input type="text" placeholder="请输入弹幕内容~~~">
        <input type="color" id="color">
        <button id="send">发送</button>
    </div>


    <script>
        let box = document.getElementsByClassName("box")[0];
        let input = document.getElementsByTagName("input")[0];
        let send = document.getElementById("send");
        let textColor = document.getElementById("color");

        function randomNumber(min, max) {
            return parseInt(Math.random() * (max - min + 1) + min);
        }


        // 1.用户输入弹幕内容
        // 2.点击发送按钮，判断用户输入的内容是否为空，不为空就发送弹幕
        send.onclick = function () {
            let text = input.value;
            if (text) {
                // 3.把用户输入的弹幕内容放在新增的p元素中，p元素放到box盒子中
                // 方法一：失败，因为会导致box盒子内容更新，从而导致视频重新播放
                // box.innerHTML+=`
                // <p style="top:${randomNumber(20,box.offsetHeight-20)}px" >${text}</p> 
                // `

                // 方法二：
                let newP = document.createElement("p");
                newP.innerText = text;
                newP.style.top = randomNumber(20, box.offsetHeight - 40) + "px";
                newP.style.color = textColor.value; //字体添加颜色

                box.appendChild(newP);
                let speed = randomNumber(1, 5); //表示速度

                // 4.向左移动p元素
                // 方法一：
                // let stop=setInterval(function(){
                //     // console.log(getComputedStyle(newP).left);
                //     console.log(newP.offsetLeft);
                //     newP.style.left=newP.offsetLeft-speed+"px";
                //     // 5.当p元素移出box盒子之后，就删除p元素
                //     if(newP.offsetLeft<-newP.offsetWidth){
                //         newP.remove();
                //         clearInterval(stop);
                //     }

                // },10);

                // 方法二：css的移动
                let time=randomNumber(2,10);
                setTimeout(function () {
                    newP.style.transform = `translateX(${-box.offsetWidth-newP.offsetWidth}px) rotate(1200deg)`;
                    newP.style.transition = `all ${time}s linear`;
                    setTimeout(function(){
                        newP.remove();
                    },time*1000+500);
                    
                }, 10);



            } else {
                alert("请输入弹幕内容！");
            }
        }
    </script>
</body>

</html>